/**
 * Created by ziyu on 17/3/13.
 */
import React from 'react'
import {Table, Card, Icon, Popover, Button, Collapse} from 'antd'
import Styles from '../../../finance/common/detail/Index.less'
import {fetchPost} from '../../../../utils/request'
const Panel = Collapse.Panel
class CheckRecord extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userId: props.userId,
      tradeNo: props.tradeNo,
      loading: false,
      list: [],
      message: '',
      timer: null
    }
  }

  componentWillReceiveProps(props) {
    if (this.state.userId !== props.userId || this.state.tradeNo !== props.tradeNo) {
      this.setState({
        userId: props.userId,
        tradeNo: props.tradeNo,
      }, () => {
        this.getData()
      })
    }
  }

  componentDidMount() {
    this.getData()
  }

  getData() {
    this.setState({
      loading: true
    })
    const {tradeNo} = this.state;
    if (!tradeNo && tradeNo === "object") {
      this.setState({
        list: [],
        loading: false
      })
    } else {
      fetchPost(`/audit/user/${this.state.tradeNo}/record`).then(json => {
        if (json.code === 0) {
          this.setState({
            loading:false
          },()=>{
            if(json.data&&json.data.list){
              this.setState({
                list:json.data.list
              })
            }
          })
        } else {
          this.setState({
            list: [],
            loading: false,
            message: json.msg
          })
        }
      })
    }
  }

  message() {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: ''
        })
      }, 3000)
      return (
        <span className='color-warning warning-animate'><Icon type='info-circle-o'/> {this.state.message}</span>
      )
    } else {
      return ''
    }
  }

  componentWillUnmount() {
    clearTimeout(this.state.timer)
  }

  render() {
    const columns = [
      {
        title: 'Type',
        dataIndex: 'type',
        key: 'type'
      },
      {
        title: 'Operator',
        dataIndex: 'auditor',
        key: 'auditor'
      },
      {
        title: 'Create Time',
        dataIndex: 'gmtCreate',
        key: 'gmtCreate'
      },
      {
        title: 'Operating Time',
        dataIndex: 'verifiedDate',
        key: 'verifiedDate'
      },
      {
        title: 'Audit Results',
        dataIndex: 'status',
        key: 'status'
      },
      {
        title: 'Remarks',
        dataIndex: 'reason',
        key: 'reason'
      },
      // {
      //   title: 'Detailed',
      //   dataIndex: 'auditDetail',
      //   key: 'auditDetail',
      //   render: (text, record) => (
      //     record.auditDetail
      //       ?
      //       <div style={{width: 70, position: 'relative', whiteSpace: 'nowrap'}}>
      //         <Popover placement="top" title="" content={record.auditDetail} trigger="click" arrowPointAtCenter>
      //           <Button>Detail</Button>
      //         </Popover>
      //       </div>
      //       :
      //       <span></span>
      //   )
      // }
    ]

    return (
      <div className={`${Styles.checkRecord} ${Styles.partRight}`}>
        <Collapse defaultActiveKey={['1']}>
          <Panel header="Audit Record" key="1">
            <Table
              pagination={false}
              size='small'
              bordered
              dataSource={this.state.list}
              columns={columns}
              loading={this.state.loading}
            />
          </Panel>
        </Collapse>
      </div>

    )
  }
}

export default CheckRecord
